<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<title>switchable - 轮播</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no,email=no" />
<link rel="apple-touch-icon" href="../../yo.png" />
<link rel="shortcut icon" href="../../shortcut.png" />
<link rel="stylesheet" href="../../usage/export/yo-switchable.css" />
</head>
<body>

<div class="yo-flex">
    <header class="yo-header m-header">
        <h2 class="title">yo-switchable</h2>
        <a href="../index.html" class="regret yo-ico">&#xf07d;</a>
        <a href="../../doc/element.html#yo-switchable" class="affirm">文档</a>
    </header>
    <div class="flex">
        <section class="m-demo">
            <div class="yo-switchable">
                <ul class="cont">
                    <li class="item">
                        <img class="img" src="http://img7.ph.126.net/e9RD4hshTKggMMnLoyzkWQ==/2881177861627391097.jpg" alt="美女" />
                    </li>
                    <li class="item">
                        <img class="img" src="http://img7.ph.126.net/e9RD4hshTKggMMnLoyzkWQ==/2881177861627391097.jpg" alt="美女" />
                    </li>
                    <li class="item">
                        <img class="img" src="http://img7.ph.126.net/e9RD4hshTKggMMnLoyzkWQ==/2881177861627391097.jpg" alt="美女" />
                    </li>
                    <li class="item">
                        <img class="img" src="http://img7.ph.126.net/e9RD4hshTKggMMnLoyzkWQ==/2881177861627391097.jpg" alt="美女" />
                    </li>
                </ul>
                <ul class="index">
                    <li class="on"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
                <span class="yo-ico yo-ico-prev">&#xf07d;</span>
                <span class="yo-ico yo-ico-next">&#xf07f;</span>
            </div>
        </section>

        <section class="m-desc">
            <h3 class="title">示例描述：</h3>
            <xmp><div class="yo-switchable">
    <ul class="cont">
        <li class="item">
            <img class="img" src="*.jpg" alt="美女" />
        </li>
        <li class="item">
            <img class="img" src="*.jpg" alt="美女" />
        </li>
        <li class="item">
            <img class="img" src="*.jpg" alt="美女" />
        </li>
        <li class="item">
            <img class="img" src="*.jpg" alt="美女" />
        </li>
    </ul>
    <ul class="index">
        <li class="on"></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <span class="yo-ico yo-ico-prev">&#xf07d;</span>
    <span class="yo-ico yo-ico-next">&#xf07f;</span>
</div></xmp>
        </section>

        <section class="m-demo">
            <div class="yo-switchable yo-switchable-test">
                <ul class="cont">
                    <li class="item">
                        <img class="img" src="http://img7.ph.126.net/e9RD4hshTKggMMnLoyzkWQ==/2881177861627391097.jpg" alt="美女" />
                    </li>
                    <li class="item">
                        <img class="img" src="http://img7.ph.126.net/e9RD4hshTKggMMnLoyzkWQ==/2881177861627391097.jpg" alt="美女" />
                    </li>
                    <li class="item">
                        <img class="img" src="http://img7.ph.126.net/e9RD4hshTKggMMnLoyzkWQ==/2881177861627391097.jpg" alt="美女" />
                    </li>
                    <li class="item">
                        <img class="img" src="http://img7.ph.126.net/e9RD4hshTKggMMnLoyzkWQ==/2881177861627391097.jpg" alt="美女" />
                    </li>
                </ul>
                <ul class="index">
                    <li class="on"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
                <span class="yo-ico yo-ico-prev">&#xf07d;</span>
                <span class="yo-ico yo-ico-next">&#xf07f;</span>
            </div>
        </section>

        <section class="m-desc">
            <h3 class="title">假设你想要翻页按钮：</h3>
            <xmp>@include yo-switchable(
    $name: test,
    $has-btn: true
);</xmp>
        </section>

    </div>
</div>

</body>
</html>